<template>
    <div class="app">
        <h2>{{ha}}</h2>
        <form @submit.prevent="onSubmit">
            <label>
                <section>
                    {{hb.a}}
                    <input type="tel" required v-model="tel">
                </section>
                <p>{{hb.b}}</p>
            </label>
            <label>
                <section>
                    {{hc.a}}
                    <input type="email" required v-model="email">
                </section>
                <p>{{hc.b}}</p>
            </label>
            <label class="type">
                <section>
                    {{hd.a}}
                    <label><input type="radio" name="xuan" value="1" v-model="xuan" checked="checked">{{hd.b}}</label>
                    <label><input type="radio" name="xuan" value="2" v-model="xuan">{{hd.c}}</label>
                </section>
                <p>{{hd.d}}</p>
            </label>
            <label>
                <section>
                    {{he.a}}
                    <input type="password" required v-model="password">
                </section>
                <p>{{he.b}}</p>
            </label>
            <label class="yz">
                <section>
                    {{hf.a}}
                    <input type="text" required v-model="inspect">
                </section>
                <p>{{hf.b}}</p>
            </label>
            <label class="btn">
                <button>注册</button>
            </label>
        </form>
    </div>
    
</template>
<script>
import axios from 'axios';
export default {
    data(){
        return {
            ha:'jQuery用户注册表单验证代码',
            hb:{
                a:'手机号码',b:'仅用于发送服务开通与到期提醒以及紧急故障方便联系到您，绝对保密'
            },
            hc:{a:'邮箱',b:'请输入您常用的邮箱'},
            hd:{a:'登录账号',b:'手机号码',c:'邮箱',d:'请选择以哪个作为您的登录账号'},
            he:{a:'设置密码',b:'请使用6~20个英文字母（区分大小写）、符号或数字'},
            hf:{a:'短信验证码',b:'若尝试多次仍无法接收到短信验证码，请您联系在线客服帮您开通账号'},
            tel:'',
            email:'',
            xuan:'1',
            password:'',
            inspect:'',
        }
    },
    methods:{
        onSubmit(){
            console.log(this.$data)
            const { tel,email,password,inspect } = this.$data;
            var reg = /^1(3|4|5|7|8)\d{1}[-]?\d{4}[-]?\d{4}$/;
            if(!reg.test(tel)){
                alert("手机号码格式不正确！\n\n手机号码是11位，并以13、14、15、17、18开头！");
            }
            if(password.trim().length<6){
                alert("密码不能少于6位");
            }
            if(inspect.trim().length!==4){
                alert("短信验证码应为4位数");
            }
        }
    }
}
</script>
<style lang="scss">
*{margin: 0;padding: 0;}
.app{
    width: 992px;
    height: 468px; 
    margin: 50px auto 0;
    background: #f2f2f2;
    border: 1px solid #cccccc;
    border-radius: 6px;
    h2{
        width: 100%;
        height: 80px;
        line-height: 80px;
        font-size: 24px;
        text-align: center;
        color: #333333;
        font-weight: normal;
    }
    form{
        width: 100%;
        height: 381px;
        box-sizing: border-box;
        padding: 25px 50px;
        label{
            display: block;
            width: 100%;
            height: 55px;
            display: flex;
            justify-content: space-between;
            section{
                width: 45%;
                text-align: right;
                font-size: 14px;
                color: #333333;
                input{
                    width: 270px;
                    height: 28px;
                    border: 1px solid #cccccc;
                    border-radius: 4px;
                    margin-left: 6px;
                }
            }
            p{
                width: 45%;
                font-size: 12px;
                color: #bfbfbf;
            }
        }
        .type{
            section{
                text-align: left;
                text-indent: 14%;
                label{
                    display: inline;
                    input{
                        width: 15px;
                        height: 15px;
                        margin-left: 12px;
                        margin-right: 5px;
                    }
                }
            }
        }
        .yz{
            section{
                text-align: left;
                text-indent: 12%;
                input{
                    width: 157px;
                }
            }
        }
        .btn{
            border-top: 1px solid #ffffff;
            button{
                display: block;
                width: 106px;
                height: 35px;
                border: 0;
                background: url(../assets/btn_bg.png)no-repeat;
                background-size: 100% 100%;
                text-indent: 20px;
                margin-left: 86%;
                margin-top: 10px;
            }
        }
    }
}
</style>